<template>
  <div class="editForm">
    <div class="editTitle">基本信息</div>
    <el-descriptions class="margin-top" :column="3"  border>
      <el-descriptions-item>
        <template slot="label">
          个案类型
        </template>
        <el-input v-model="formData.type"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          个案来源
        </template>
        <el-input v-model="formData.source"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          处理级别
        </template>
        <el-input v-model="formData.level"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <div class="editTitle">咨询内容</div>
    <el-form label-width="225px" :model="formData">
      <el-form-item label="来访者情绪表现">
        <el-input type="textarea" resize="none" v-model="formData.emotion"></el-input>
      </el-form-item>
      <el-form-item label="来访者身体健康状况、仪表、神态、体态">
        <el-input type="textarea" resize="none" v-model="formData.health" class="double"></el-input>
      </el-form-item>
      <el-form-item :label="'来访者自述'+'\n'+'（包括近期状况、人际关系、成长中的相关重要事件等）'">
        <el-input type="textarea" resize="none" v-model="formData.statement" class="multiline"></el-input>
      </el-form-item>
      <el-form-item :label="'咨询过程、方法和策略'+'\n'+'（重要部分可粘贴逐字稿）'">
        <el-input type="textarea" resize="none" v-model="formData.process" class="double"></el-input>
      </el-form-item>
      <el-form-item :label="'咨询印象'+'\n'+'（问题类型、程度、原因）'">
        <el-input type="textarea" resize="none" v-model="formData.impression" class="double"></el-input>
      </el-form-item>
      <el-form-item label="咨询日标（近期、远期）" style="border-bottom: 1px solid black">
        <el-input type="textarea" resize="none" v-model="formData.target" ></el-input>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "editRecord",
  props:{
    editParams:Object,
    recordVisible: {
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      formData:{
        id: '',
        type: '',
        source: '',
        level: '',
        emotion: '',
        health: '',
        statement: '',
        process: '',
        impression: '',
        target: '',
        result: '',
        time: ''
      }
    }
  },
  methods:{
    resetFormData(){
      for (let i in this.formData){
        this.formData[i] = this.editParams[i]
      }
    },
    save(){
      this.$emit('save',this.formData)
    },
    cancel(){
      this.$emit('cancel')
    }
  },
  watch:{
    recordVisible: {handler:'resetFormData',immediate:true}
  }
}
</script>

<style scoped lang="scss">
.editTitle {
  color: rgba(16, 16, 16, 1);
  font-size: 18px;
  padding: 18px 0 21px;
}
.button {
  padding-top: 48px;
  text-align: center;
}
::v-deep .el-form-item__label {
  border: 1px solid black;
  border-bottom: 0;
  padding: 20px 5px;
  text-align: left;
  line-height: 20px;
  color: #000;
  font-size: 16px;
  white-space: pre-wrap;
  font-family: '宋体';
  font-weight: 500;
}
::v-deep .el-textarea__inner{
  border: 0;
  border-top: 1px solid black;
  border-radius: 0px;
  height: 60px;
}
::v-deep .el-form-item {
  margin-bottom: 0;
  border-right: 1px solid black;
}
.double{
  ::v-deep .el-textarea__inner{
    height: 80px;
  }
}
.multiline {
  ::v-deep .el-textarea__inner{
    height: 100px;
  }
}
::v-deep .el-input__inner {
  border: 0;
  padding: 0;
  width: 122px;
}
</style>
